<template>
	<view class="mask-list-container">
		<u-popup mode="bottom" v-model="popupShow" height="94%" :mask-close-able="false"
			:mask-custom-style="{ background: 'rgba(0, 0, 0, 0)' }">
			<view class="tabs-bar">
				<view class="tabs-box">
					<u-tabs-swiper ref="uTabs" name="title" :list="list" :current="tabsCurrent" @change="tabsChange"
						:show-bar="false" :is-scroll="true" height="60" bg-color="#33cc00" inactive-color="#fff"
						active-color="#fff" :active-item-style="{
              background: '#fdd438',
              borderRadius: '40rpx',
              height: '80%',
            }"></u-tabs-swiper>
				</view>
				<view class="tabs-close" @click="handleClosePopup">关闭</view>
			</view>
			<scroll-view scroll-y style="height: 800rpx; width: 100%">
				<view class="mask-list">
					<view class="mask-item" v-for="(mask, index) in maskListData[tabsCurrent]" :key="mask.id"
						@click="selectMask(index)">
						<image :src="imgUrl+mask.image" mode="" />
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const list = [];
			const maskListData = [];
			return {
				list,
				maskListData,
				imgUrl: this.$url.ali,
				tabsCurrent: 0,
			};
		},
		props: {
			popupShow: {
				type: Boolean,
				default: false,
			},
			itemlist:{
				type:Array,
				default:[]
			}
		},
		created() {
			this.getType();
		},
		methods: {
			async getType() {
				await this.$u
					.post("get_image_type")
					.then((res) => {
						this.list = res.data
					});
				for (let i in this.list) {
					await this.$u
						.post("get_image_by_type", {
							image_type_id: this.list[i].id
						})
						.then((res) => {
							// this.list = res.data
							this.maskListData.push(res.data)
						});
				}
			},
			handleClosePopup() {
				this.$emit("popupClose");
			},
			tabsChange(index) {
				this.tabsCurrent = index;
			},
			selectMask(index) {
				this.handleClosePopup();
				let mask = {
					url: this.imgUrl + this.maskListData[this.tabsCurrent][index].image,
					tailorUrl: this.imgUrl + this.maskListData[this.tabsCurrent][index].image,
				};
				this.$emit("selectMask", mask);
			},
		},
	};
</script>

<style scoped>
	.tabs-bar {
		height: 100rpx;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: space-around;
		background-color: #33cc00;
	}

	.tabs-box {
		width: 88%;
		box-sizing: border-box;
		padding: 10px;
	}

	.tabs-close {
		width: 12%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: #fdd438; */
		color: #fdd438;
	}

	.mask-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.mask-item {
		width: 15%;
		height: 100rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.mask-item image {
		width: 100%;
		height: 100rpx;
	}
</style>
